<template>
  <a-modal :width="1200" v-model:visible="showAddKeywordDialog" title="添加关键词" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <a-form ref="formRef" :model="formInfo" :rules="rules">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="广告活动：" label-col-flex="100px">
            <div>
              <p>{{ campaignInfo.campaignName }}</p>
              <p style="color: #999">{{ campaignInfo.campaignId }}</p>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="默认竞价：" label-col-flex="100px">
            <a-input-number v-model="formInfo.defaultBid" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="advertStore && advertStore.currentLevel === 'campaign'">
        <a-col :span="12">
          <a-form-item field="adGroupId" label="广告组：" label-col-flex="100px">
            <a-select v-model="formInfo.adGroupId" placeholder="请选择">
              <a-option v-for="(adGroup, i) in adGroupList" :key="i" :value="adGroup.adGroupId" :label="adGroup.adGroupName" />
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <CreateSpKeyword :shop="shop" :campaignId="campaignInfo.campaignId" :adGroupId="formInfo.adGroupId" :adType="campaignInfo.adType" spKeywordRecommendationType="KEYWORDS_FOR_ADGROUP" :defaultTargetingBid="formInfo.defaultBid" ref="keywordRef" />
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { createKeyword, getAdGroupByCampaignId } from '@/api/advert'
  import CreateSpKeyword from './createSpKeyword.vue'
  import useAdvertStore from '@/store/modules/advert'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: 'adGroup',
    },
  })
  onMounted(() => {
    if (advertStore.currentLevel === 'campaign') {
      //广告组列表
      getAdListListByShopId()
    } else {
      //广告组
      formInfo.value.adGroupId = advertStore.currentGroup?.adGroupId
    }
  })

  const showAddKeywordDialog = ref(props.isShow)
  const submitLoading = ref(false)
  const keywordRef = ref()
  const formInfo = ref<any>({})
  const formRef = ref()
  const advertStore = useAdvertStore()
  const campaignInfo = advertStore.currentCampaign || {}
  const shop = ref({
    shopId: advertStore.currentShop?.shopId,
    id: advertStore.currentShop?.shopId,
    marketplaceId: advertStore.currentShop?.marketplaceId,
  })

  const rules = ref({
    adGroupId: [{ required: true, message: '请选择广告组' }],
  })
  const adGroupList = ref<Array<any>>([])

  // 关闭
  function closedDialog() {
    showAddKeywordDialog.value = false
    emit('closed')
  }
  // 获取广告组列表
  async function getAdListListByShopId() {
    const res: any = await getAdGroupByCampaignId({
      campaignId: campaignInfo.campaignId,
      shopId: shop.value.shopId,
    })
    adGroupList.value = res?.data || []
  }
  // 创建关键词
  async function submitData() {
    let valid = await formRef.value.validate((valid: any) => {
      return valid
    })
    if (valid) return false

    let keywordTargetingInfos = keywordRef.value.setCreateData()?.keywordTargetingInfos || []
    if (!keywordTargetingInfos.length) {
      Message.error('关键词不能为空')
      return false
    }
    let flag = await keywordRef.value.validateData()
    if (!flag) {
      return false
    }

    let params = {
      adType: advertStore.currentCampaign?.adType,
      shopId: advertStore.currentShop?.shopId,
      createKeywordInfos: keywordTargetingInfos.map((el: any) => {
        return {
          ...el,
          adGroupId: formInfo.value.adGroupId,
          campaignId: advertStore.currentCampaign?.campaignId,
        }
      }),
    }
    const res: any = await createKeyword(params)
    if (!res) return false
    Message.success('添加成功')
    emit('success')
    closedDialog()
  }
</script>
<style lang="less" scoped></style>
